<%@page import="com.blog.bean.Blog"%>
<%@page import="java.util.List"%>
<%@page import="com.blog.bean.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	User user = (User)session.getAttribute("loginUser");
	List<Blog> historyBlogs = (List<Blog>)session.getAttribute("history_blog");
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>MyBlog</title>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="source/css/bootstrap.min.css" >
	<link rel="stylesheet" href="source/css/reset.css"> <!-- CSS reset -->
	<link rel="stylesheet" href="source/css/htmleaf-demo2.css">
	<link rel="stylesheet" href="source/css/style_index.css"> <!-- Resource style -->
	<script src="source/js/modernizr.js"></script> <!-- Modernizr -->
	<script src="source/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="source/js/wangEditor.min.js"></script>
	<style type="text/css">
	.toolbar {
	border: 1px solid #ccc;/*设置下拉棒*/
	}
	.w-e-text-container{
	height: 500px !important;/*!important是重点，因为原div是行内样式设置的高度300px*/
	}
	</style>
	<script type="text/javascript">
	/*
	$(document).ready(function(){ 
		$("#div1").css("background-color","red");
	});*/
	</script>
	

	<style type="text/css">
		.glyphicon { margin-right:5px; }
		.btn-wrapper{
			padding: 1em 0;
		}
		.thumbnail
		{
		    margin-bottom: 20px;
		    padding: 0px;
		    -webkit-border-radius: 0px;
		    -moz-border-radius: 0px;
		    border-radius: 0px;
		}

		.item.list-group-item
		{
		    float: none;
		    width: 100%;
		    background-color: #fff;
		    margin-bottom: 10px;
		}
		.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
		{
		    background: #428bca;
		}

		.item.list-group-item .list-group-image
		{
		    margin-right: 10px;
		}
		.item.list-group-item .thumbnail
		{
		    margin-bottom: 0px;
		}
		.item.list-group-item .caption
		{
		    padding: 9px 9px 0px 9px;
		}
		.item.list-group-item:nth-of-type(odd)
		{
		    background: #eeeeee;
		}

		.item.list-group-item:before, .item.list-group-item:after
		{
		    display: table;
		    content: " ";
		}

		.item.list-group-item img
		{
		    float: left;
		}
		.item.list-group-item:after
		{
		    clear: both;
		}
		.list-group-item-text
		{
		    margin: 0 0 11px;
		}
	</style>
	
</head>
<body>
	<header class="cd-main-header animate-search" >
		<div class="cd-logo">
		<a href="index"><img height="45px" src="source/img/logo.svg" alt="myblog首页"></a> 
		
		</div>

		<nav class="cd-main-nav-wrapper">
			<a id="a_search" href="#search" class="cd-search-trigger cd-text-replace">Search</a>
			
			<ul class="cd-main-nav">
				<li><a href="#0">最新</a></li>
				<li><a href="#0">最热</a></li>
				<li><a class="disabled">||</a></li>
				<li><a href="searchBlog?type=java">java</a></li>
				<li><a href="searchBlog?type=python">python</a></li>
				<li><a href="searchBlog?type=php">php</a></li>
				<li><a href="searchBlog?type=移动开发">移动开发</a></li>
				<li><a href="searchBlog?type=大数据">大数据</a></li>
				<li><a href="searchBlog?type=物联网">物联网</a></li>
				<li><a class="disabled">||</a></li>
				<%
					if(user == null){
						out.print("<li><a  href='login'>登录/注册</a></li>");
						
					}else{
						
						out.print("<li><div class='btn-group'><button type='button' class='btn btn-info dropdown-toggle' data-toggle='dropdown'  >"+
								user.getName()+"<span class='caret'></span></button><ul class='dropdown-menu'><li><a href='userBlog'>我的主页</a></li><li><a href='createBlog'>创作中心</a></li>"+
								"<li><a href='#'>我的圈子</a></li> <li role='separator' class='divider'></li><li><a href='removeLogin'>退出登录</a></li>"+
								" </ul></div></li>");
						
					}
				%>
			</ul> <!-- .cd-main-nav -->
		</nav> <!-- .cd-main-nav-wrapper -->

		<a href="#0" class="cd-nav-trigger cd-text-replace">Menu<span></span></a>
	</header>
	
	<main style="background-color:#62AFFE;" >
		
		
		 
		<div class="input-group input-group-lg" style=" width:70%;margin-left:auto;margin-right:auto; ">
		  <span class="input-group-addon" id="sizing-addon1">标题</span>
		  <input id="title"  type="text" class="form-control" placeholder="主标题" aria-describedby="sizing-addon1">
		  
		</div>  
		<div style="width:70%;margin-left:auto;margin-right:auto; ">
			<textarea id="describe" class="form-control" placeholder="描述" rows="3"></textarea>
		</div> 
		
	
		<!-- your content here -->
		
		<!-- 编辑器 -->
		<div id="div1" style="background-color:#fff;width:70%; margin-left:auto;margin-right:auto;">
		    <p>欢迎使用 MyBlog,请开始你的写作...</p>
		</div>
		
    	<div id="div2" style="background-color:#fff;width:70%; margin-left:auto;margin-right:auto;">
    	</div>
    	
    	
    	<div style="border-top-left-radius:20px;border-top-right-radius:20px;background-color:#F5F6F7;width:100%;margin-left:auto;margin-right:auto; height:200px;">
			
		
		
		
    	
    	 
    	
    	<div style="background-color:#fff;width:70%; margin-left:auto;margin-right:auto;">
    		
    		<form action="#"> 
    		
    			<table class="table table-hover" >
	    			<tr align="center"><td><input id="btn1" type="hidden"></td><td><input id="btn1" type="hidden"></td></tr>
	    			<tr align="center"><td>博客类型:</td><td> 
	    			<select id="type1" name="type"  class="form-control">
                   	<option value="java" selected="selected">java</option>
                    <option value="python" >python</option>
                    <option value="php">php</option>
                    <option value="移动开发" >移动开发</option>
                    <option value="大数据">大数据</option>
                    <option value="物联网" >物联网</option>
                    <option value="其他">其他</option>
 
                 	</select></td></tr>
	    			<tr align="center" ><td>访问权限：</td><td><input id="power1" type="radio" name="power" value="1" checked="checked"  >所有人可见&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="power" value="2">粉丝可见&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="power" value="3">仅自己可见</td></tr>
    				<tr align="center"><td><button id="sendBlog" type="button" class="btn btn-danger">发布</button></td><td><button type="button" class="btn btn-info">返回</td></tr>
    			</table>
				
			</form> 
    	</div>
			
		</div>
		
		
		
		<script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#div1')
        // 或者 var editor = new E( document.getElementById('editor') )
        
     	// 上传图片到服务器
	    editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
	 
	    editor.create()
	    document.getElementById('sendBlog').addEventListener('click', function () {
	        // 读取 html 
	        document.getElementById('div2').innerHTML=editor.txt.html()
	    }, false)
	
	    document.getElementById('btn2').addEventListener('click', function () {
	        // 读取 text
	        alert(editor.txt.text())
	    }, false)
	    </script>


		<script type="text/javascript">
		$(document).ready(function(){
			//查询blog
		    $("#a_search").click(function(){
		    	var type = $("#type_select option:selected").val();
		    	var title = $("#search_input").val();
		    	if(title == ""){ 
		    		
		    	}else{
		    		window.location.href="searchBlog?type="+type+"&title="+title; 
		    	}
		    	
		    	
		    	
		    });
			//删除记录
		    $(".deleteRecord").click(function(){
		    	$(this).parents("li").hide();
		    	$.post("deleteRecord",{
					id:$(this).parents("li").children("input.reid").val()
					},
					function(data,status){
						
						
					
				});
		    });
	    	
	    	$("#sendBlog").click(function(){
			 
	    		$('#btn1').trigger("click");
	    		setTimeout(function(){
	    			var htmv = $("#div2").html();
					$.post("saveHtml",{
						text:htmv
						},
						function(data,status){
							if(data.state == 1){
								 
								$.post("addBlog",{
									title: $("#title").val(),
									describe:$("#describe").val() ,
									contenturl: data.url,
									type:$("#type1 option:selected").val() ,
									power:$("input[name='power']:checked").val() 
									
								},function(data2,status){
									window.location.href="userBlog"; 
								});
								
								$("#div2").html(data.url);
							}else if(data.state==0){
								window.location.href=data.url;
							}else if(data == 2){
								alert(data.msg);
									
							}
							
					});
	    		},1000);
				 
					
				
	        });
	    });
		    
		    
		    
		</script>
		
	</main>

	<div id="search" class="cd-main-search">
		<form>
			<input id="search_input" type="search" placeholder="查找博客">

			<div class="cd-select">
				<span>类型</span>
				<select id="type_select" name="type">
					<option value="">所有类型</option>
					<option value="java">java</option>
					<option value="python">python</option>
					<option value="php">php</option>
					<option value="移动开发">移动开发</option>
					<option value="大数据">大数据</option>
					<option value="物联网">物联网</option>
					<option value="其他">其他</option>
				</select>
				<span class="selected-value">所有类型</span>
			</div>
		</form>

		<div class="cd-search-suggestions"style="z-index:99999">
			<div class="news">
				<h3>最近查看（最多显示5条）</h3>
				<ul>
					<% if(historyBlogs != null){ for(int i = 0;i<historyBlogs.size();i++){%>
					<li>
						<input class="reid" type="hidden" value="<%=historyBlogs.get(i).getId() %>">
						<a class="image-wrapper" href="#0"><img src="source/img/user.png" alt="News image"></a>
						<h4><a class="cd-nowrap" href="showBlog?id=<%=historyBlogs.get(i).getId() %>"><%=historyBlogs.get(i).getTitle() %></a></h4>
						<time datetime="2020-06-08 21:59:00"><%=historyBlogs.get(i).getCreatedate() %></time>
						<h6 class="deleteRecord"><a href="#0"><time datetime="2016-01-12">删除记录</time></a></h6>
					</li>
					<% }}  %>
				</ul>
			</div> <!-- .news -->

			<div class="quick-links">
				<h3>更多</h3>
				<ul>
					
					<li><a href="#0">查看所有记录</a></li>
				</ul>
			</div> <!-- .quick-links -->
		</div> <!-- .cd-search-suggestions -->

		<a href="#0" class="close cd-text-replace">Close Form</a>
	</div> <!-- .cd-main-search -->
	<div class="cd-cover-layer"></div> <!-- cover main content when search form is open -->

	<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
	<script src="source/js/Carousel.js"></script> 
	<script type="text/javascript">
		$(function(){
			Carousel.init($("#carousel"));
			$("#carousel").init();
		});
		  
	</script>
	
	
	<script src="source/js/main.js"></script> <!-- Resource jQuery -->
	<script src="source/js/bootstrap.min.js"></script>
	<div class="related" style="height:150px; postion:fixed;bottom:0;  ">
		    <h4>MyBlog</h4>
		    
	</div>
	
</body>
</html>